<template>
    <div class="tags">
      <el-tag :key="tag.name" v-for="(tag,index) in tags"
      :closable="tag.name !=='home'"
      :disable-transitions="false"
      :effect="$route.name == tag.name ? 'dark':'plain'"
      @click="chageMenu(tag)"
      @close="handleClose(tag,index)"
      >
        {{ tag.label }}
      </el-tag>
    </div>
</template>

<script>
import {useRoute, useRouter} from 'vue-router'
import { useStore } from 'vuex';
export default {
    setup() {
      const router=useRouter();
      const route=useRoute();
      const store=useStore();
      const tags=store.state.tabsList;
      const chageMenu=(item)=>{
        router.push({name:item.name})
      }
      const handleClose=(tag,index)=>{
        let length=tags.length -1;
        //删除操作
        store.commit("closeTab",tag);
        //做第一个判断
        if(tag.name!== route.name){
          return;
        }
         if(index===length){
          router.push({
            name:tags[index-1].name,
          });
         }else{
          router.push({
            name:tags[index].name,
          });
         }
      };

      return{
        tags,
        chageMenu,
        handleClose,
      };
    },
    
}
</script>

<style lang="less" scoped>
.tags{
  padding: 20px;
  width: 100%;
  .el-tag{
    margin-right: 15px;
    cursor: pointer;
  }
}
</style>